<!--<extend name="Base/base" />-->
<block name='head'>
    <meta charset="utf-8">
    <link href="/Public/Index/css/css.css" rel="stylesheet" /> 
    <link href="/Public/Index/css/demo.css" rel="stylesheet" /> 

</block>
<block name="content" > 

    <div class="statistical">
        <div class="my_messages">
            <div class="people_img"><img src="{$userInfo.head}" /></div>
            <h2>{$userInfo.user_name}</h2>
            <div class="messages_nr">
                <div class="messages_left">
                    <p><span class="t1">本月您有：</span></p>
                    <ul>
                        <if condition="$leader == 1">
                            <li><span class="icon_a">&#xe648;</span><span class="g1">{$unRunCount}</span>条流程未审批</li>
                        </if>
                        <li><span class="icon_a">&#xe62c;</span><span class="g2">{$noDiaCount}</span>篇日志未写</li>
                        <li><span class="icon_a">&#xe6a6;</span><span class="g3">{$unPlanCount}</span>条计划未完成</li>
                    </ul>
                </div>
                <div class="messages_right">
                    <p><span class="t1">OA使用频率：</span>
                        <span class="t2"><if condition="$loginPercent elt 33">低<elseif condition="$loginPercent elt 66"/>中<else/>高</if></span>
                    </p>
                    <div><span class="num-bj"><span class="num" style="width:{$loginPercent}%"></span></span></div>
                    <p class="time"><span class="t1">上次登录时间：</span></br>{$prevLoginTime|date="Y-m-d H:i:s",###}</p>
                </div>
            </div>

        </div>
        <div class="statistical_lists">
            <div class="liucheng">
                <h3>流程审批</h3>
                <p>本月我一共{$leader ? '审批了' : '发了'}<span class="number1">{$runCount}</span>条流程<if condition="$leader">，<span class="number2">{$unRunCount}</span>条未审批</if></p>
                <if condition='$boss eq 0'>
                    <ul>
                        <li>进行中的流程数量： <span class="number4"> {$doingFlow}</span></li>
                        <li>已办结的流程数量： <span class="number5"> {$finishFlow}</span></li>
                    </ul>
               </if>
                <if condition="$is_effi eq true">
                    <div class="charts" id="flowMain" style="height:250px">
                        图表
                    </div>
                    <p>本月平均耗时：<span class="number3">{$flowEffi.currEffi}</span>&nbsp;&nbsp; 比上月{$flowEffi['increase'] > 0 ? '提高' : '降低'}  <span class="number6" style="color:{$flowEffi['increase'] > 0 ? '#FD805E' : '#5FC6C6'}">{$flowEffi.abs}%</span></p>
                    <input type="hidden" id="flowEcharts" value="{:U('getMonthFlow')}">
                </if>  
            </div>
            <div class="liucheng">
                <h3>工作计划</h3>
                <p>本月我一共参与<span class="number1">{$planCount}</span>条计划，<span class="number2">{$unPlanCount}</span>条未完成</p>
                <div class="jihua_lists">
                    <ul>
                        <foreach name="percents" item="percent">
                            <li><label>{$percent.name}({$percent.count})</label><span class="num-bj"><span class="{$percent['name'] == '年度计划' ? 'num' : 'num2'}" style="width:{$percent.total};">{$percent.total}</span></span></li>
                        </foreach>
                    </ul>
                </div>
            </div>
            <if condition="$boss eq 0">
            <div class="liucheng">
                <h3>日志</h3>
                <p>本月我一共发了<span class="number1">{$diaryCount}</span>篇日志，<span class="number2">{$noDiaCount}</span>条日志未填</p>
                <div class="charts" id="diaryMain" style="height:250px">
                    图表
                </div>
                <p>总效率：<span class="number3">{$diaryPercent}%</span>&nbsp;&nbsp; 比上月效率{$diary['diff'] > 0 ? '提高' : '降低'}  <span class="number7">{$diary.abs}%</span></p>
                <input type="hidden" id="diaryEcharts" value="{:U('getMonthDiary')}">
            </div>
                </if>
        </div>

    </div>
</block>
<block name="script">
    <script type="text/javascript" src="/Public/static/echarts/echarts.common.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var param;
            $.get($('#flowEcharts').val(), function (res) {
                console.log(res)
                param = res;
                var myChart = echarts.init(document.getElementById('flowMain'));
                var option = {
                    tooltip: {
                        trigger: 'item',
                        axisPointer: {  // 坐标轴指示器，坐标轴触发有效
                            type: 'line'       // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: function (params, ticket, callback) {
                            //console.log(param)
                            var month = params.name;
                            var html = '<p>'+month+'</p>';
                            html += '<p>审批数量：' + param.count[params.dataIndex] + '条</p>';
                            html += '<p>平均耗时：' + param.data[params.dataIndex] + '</p>';
                            return html;
                        },
                    },
                    legend: {
                        left: '5%',
                        data: ['Y轴：分钟'],
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                            type: 'category',
                            data: res.month,
                        }],
                    yAxis: [{type: 'value'}],
                    series: [
                        {
                            name: '',
                            type: 'bar',
                            barWidth: 15,
                            data: res.minute,
                            itemStyle: {
                                normal: {
                                    color: '#5FC6C6'
                                }
                            },
                            markLine: {
                                lineStyle: {
                                    normal: {
                                        type: 'dashed'
                                    }
                                },
                                data: [
                                    [{type: 'min'}, {type: 'max'}]
                                ]
                            }
                        }
                    ]
                };

                myChart.setOption(option);
            })
            
            var diaryParam;
            $.get($('#diaryEcharts').val(), function (res) {
                console.log(res)
                diaryParam = res;
                var myChart = echarts.init(document.getElementById('diaryMain'));
                var option = {
                    tooltip: {
                        trigger: 'item',
                        axisPointer: {  // 坐标轴指示器，坐标轴触发有效
                            type: 'line'       // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: function (params, ticket, callback) {
                            //console.log(params)
                            var month = params.name;
                            var html = '<p style="text-align:left">' + params.seriesName + '</p>';
                            html += '<p>本月数量：' + diaryParam.count[params.dataIndex] + '条</p>';
                            html += '<p>平均效率：' + diaryParam.percent[params.dataIndex] + '%</p>';
                            return html;
                        },
                    },
                    legend: {
                        left: '5%',
                        data: ['Y轴：分钟'],
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                            type: 'category',
                            data: res.month,
                        }],
                    yAxis: [{type: 'value'}],
                    series: [
                        {
                            name: '',
                            type: 'bar',
                            barWidth: 15,
                            data: res.percent,
                            label:{
                              normal:{
                                  show:true,
                                  position:'top',
                                  formatter:'{c}%'
                              }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#5bb4d8'
                                }
                            },
                            markLine: {
                                lineStyle: {
                                    normal: {
                                        type: 'dashed'
                                    }
                                }
                            }
                        }
                    ]
                };

                myChart.setOption(option);
            })
        })

    </script>
</block>